import React, { Component } from 'react'
import { LeftOutlined, CheckCircleOutlined,RightOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import orderCss from './Order.module.css'
import img from './images/6.jpg'
import { Drawer, Button, Radio, Space } from 'antd';
import axios from 'axios'
const style = {
    width: '8%',
    color: '#c5c5c5',
    fontSize: '0.44rem',
    padding: '0 0.25rem',
    float: "left",
    marginTop: '0.1rem'
}

// let params = {pname:this.state.inputvalue}
// axios.post("/orderList/nice/orders/insertOrder", {
//     orders:{
//         "aid": 0,
//         "del": 0,
//         "money": 0,
//         "oarea": "string",
//         "oid": "string",
//         "oname": "string",
//         "ophone": "string",
//         "ostate": "string",
//         "otime": "2021-04-07T12:20:36.573Z",
//         "pid": 0,
//         "size": 0,
//         "uid": 0
//       }


// }).then(res => {
//     console.log(res)
//     })
export default class Order extends Component {
    state = { visible: false, placement: 'bottom' };

    showDrawer = () => {
        this.setState({
            visible: true,
        });
    };
    onClose = () => {
        this.setState({
            visible: false,
        });
    };
    render() {
        const { placement, visible } = this.state;
        
            return (
                <div>
                    <header className={orderCss.header}>
                        <Link to='/Dbuy'><LeftOutlined style={style} /></Link><h2 className={orderCss.h2}>确认订单</h2>
                    </header>
                    <Link to='/address'>
                        <div className={orderCss.address}>
                            <span className={orderCss.span}>+</span>请添加国内现货商品收件地址
                    </div>
                    </Link>
                    <div className={orderCss.order_show}>
                        <div className={orderCss.order_showCon}>
                            <img className={orderCss.img} src={img} />
                            <div className={orderCss.order_showCon_right}>
                                <span className={orderCss.span}>【现货】AIR JORDAN 1 ZOOM COMFORT"EASTER"2021年版</span>
                                <span className={orderCss.span}>41码</span>
                                <span className={orderCss.span}>￥1797.0</span>
                            </div>
                        </div>
                    </div>
                    <div className={orderCss.jb}>
                        <span className={orderCss.span}><i><CheckCircleOutlined style={{ fontSize: '0.33rem', color: 'red', marginRight: '0.14rem' }} /></i>专家多重鉴别</span>
                        <span className={orderCss.span}><i><CheckCircleOutlined style={{ fontSize: '0.33rem', color: 'red', marginRight: '0.14rem' }} /></i>正品保证</span>
                        <span className={orderCss.span}><i><CheckCircleOutlined style={{ fontSize: '0.33rem', color: 'red', marginRight: '0.14rem' }} /></i>假一赔三</span>
                    </div>
                    <div className={orderCss.ps}>
                        <span className={orderCss.span}>
                            配送方式:
                        </span>
                        <>
                            <Space>
                                {/* <Button type="primary" onClick={this.showDrawer}>
                                    Open
                                </Button> */}
                                <button className={orderCss.button} type="primary" onClick={this.showDrawer}>
                                    请选择配送方式 <RightOutlined />
                                </button>
                            </Space>
                            <Drawer
                                title="配送方式"
                                placement={placement}
                                closable={false}
                                onClose={this.onClose}
                                visible={visible}
                                key={placement}
                            >
                                <p className={orderCss.p}>
                                    <div>
                                        <h3 className={orderCss.kd}>京东特惠送 + ￥20</h3>
                                        <h4 className={orderCss.sec}>自nice仓库发货后，约2~4天到达，偏远地区时效可能延长</h4>
                                    </div>
                                    <input className={orderCss.input} type='radio' />
                                </p>
                                <p className={orderCss.p}>
                                    <div>
                                        <h3 className={orderCss.kd}>京东特惠送 + ￥20</h3>
                                        <h4 className={orderCss.sec}>自nice仓库发货后，约2~4天到达，偏远地区时效可能延长</h4>
                                    </div>
                                    <input className={orderCss.input} type='radio' />
                                </p>
                                <p className={orderCss.p}>
                                    <div>
                                        <h3 className={orderCss.kd}>京东特惠送 + ￥20</h3>
                                        <h4 className={orderCss.sec}>自nice仓库发货后，约2~4天到达，偏远地区时效可能延长</h4>
                                    </div>
                                    <input className={orderCss.input} type='radio' />
                                </p>
                            </Drawer>
                        </>
                    </div>
                    <div className={orderCss.zf}>
                        <span className={orderCss.span}>
                            合计支付:
                        </span>
                        <span className={orderCss.span}>
                            ￥1797.0
                        </span>
                    </div>
                    <p className={orderCss.p1}>
                        卖家发货后不支持取消订单7天无理由退换货
                    </p>
                    <div className={orderCss.xz}>
                        <p className={orderCss.p2}>1.如果卖家未在48小时内发货，你将获得53.9元现金补偿</p>
                        <p className={orderCss.p2}>2.鉴于平台出售的商品为卖家个人全新闲置物品，一般同一规格的商品数量有限，并且商品价格存在波动性，故不适用七天无理由退换货，请您在购买前仔细阅读买家须知。</p>
                        <p className={orderCss.p3}>卖家信息<RightOutlined /></p>
                    </div>
                    <div className={orderCss.tk}>
                        <input type='checkbox'/>我已阅读并同意<span className={orderCss.span}>买家须知</span>
                    </div>
                    <footer className={orderCss.footer}>
                        <div style={{width:'60%',display:'flex',alignItems:'center',justifyContent:'center'}}>合计:<span style={{color:"#f24115",fontSize:'18px'}}>￥1797.0</span></div>
                        <button style={{width:'40%',border:'0',outline:'0',background:'#fae100'}}>提交订单</button>
                    </footer>
                </div>
            )
        }
    }

